<script setup lang="ts">
import { ref, watch } from "vue";
// import Delete from "@iconify-icons/ep/delete";
import { getJmxName } from "@/api/file";
import { ElMessage } from "element-plus";

defineOptions({
  name: "AddDialog"
});

const props = defineProps({
  modelValue: {
    type: Boolean,
    require: true,
    default: false
  },
  projectName: {
    type: String,
    require: true
  },
  type: {
    type: String,
    require: true
  }
});

const jmxList = ref([]);
const dialogVisible = ref(props.modelValue); //显示弹窗
// const showHoldFor = ref(true);
// const showRampUp = ref(true);
// const formData = ref({
//   concurrency: 100,
//   // "hold-for": "",
//   // "ramp-up": "",
//   scenario: "",
//   targettime: "3000"
// });
const form = ref({
  jmx: []
});
const emits = defineEmits(["update:modelValue", "submit"]);

watch(
  () => props.modelValue,
  value => {
    if (value) {
      getJmxList();
    }
    dialogVisible.value = value;
  }
);

// 获取jmx列表
const getJmxList = async () => {
  try {
    const res = await getJmxName({ projectName: props.projectName });
    if (res.success) {
      const arr = [];
      res.data.forEach(item => {
        arr.push({ value: item.split(".")[0] });
      });
      jmxList.value = arr;
    } else {
      ElMessage.error(res.msg);
    }
  } catch (error) {
    ElMessage.error(error);
  }
};

const close = () => {
  dialogVisible.value = false;
  emits("update:modelValue", false);
};

const submit = () => {
  const arr = [];
  if (props.type == "execution") {
    if (form.value.jmx.length != 0) {
      form.value.jmx.forEach(item => {
        arr.push({
          concurrency: 100,
          "ramp-up": 10,
          scenario: item,
          targettime: 10,
          "hold-for": "${Runtime}s",
          lastavgtime: 0,
          lasttps: 0,
          distributed: [],
        });
      });
    } else {
      arr.push({
        concurrency: 100,
        "ramp-up": 10,
        scenario: "",
        targettime: 10
      });
    }
    emits("submit", arr);
  } else if (props.type == "scenarios") {
    if (form.value.jmx.length != 0) {
      form.value.jmx.forEach(item => {
        arr.push(item);
      });
    } else {
      // arr.push("编辑名称");
    }
    emits("submit", arr);
  }
  close();
};
</script>

<template>
  <el-dialog v-model="dialogVisible" title="新增" width="30%" @close="close">
    <el-form ref="formRef" :model="form" label-width="100px">
      <!-- <el-form-item label="concurrency">
        <el-input-number v-model="formData.concurrency" />
      </el-form-item> -->
      <!-- <el-form-item v-if="showHoldFor" label="hold-for">
        <el-input v-model="formData['hold-for']" style="width: 90%" />
        <el-popconfirm
          title="你确定要删除此项吗?"
          width="200"
          @confirm="delItem(0)"
        >
          <template #reference>
            <div>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <el-button
                  circle
                  size="small"
                  style="margin-left: 10px"
                  type="danger"
                >
                  <IconifyIconOffline :icon="Delete" />
                </el-button>
              </el-tooltip>
            </div>
          </template>
</el-popconfirm>
</el-form-item>
<el-form-item v-if="showRampUp" label="ramp-up">
  <el-input v-model="formData['ramp-up']" style="width: 90%" />
  <el-popconfirm title="你确定要删除此项吗?" width="200" @confirm="delItem(1)">
    <template #reference>
            <div>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="删除"
                placement="top"
              >
                <el-button
                  circle
                  size="small"
                  style="margin-left: 10px"
                  type="danger"
                >
                  <IconifyIconOffline :icon="Delete" />
                </el-button>
              </el-tooltip>
            </div>
          </template>
  </el-popconfirm>
</el-form-item> -->
      <el-form-item label="场景名">
        <!-- <el-input v-model="formData.scenario" /> -->
        <!-- <el-autocomplete
          v-model="formData.scenario"
          :fetch-suggestions="querySearch"
          style="width: 100%"
          clearable
        /> -->
        <el-select v-model="form.jmx" multiple collapse-tags collapse-tags-tooltip placeholder="Select" filterable
          clearable style="width: 100%" no-data-text="无可添加的测试场景">
          <el-option v-for="item in jmxList" :key="item.value" :label="item.value" :value="item.value" />
        </el-select>
        <!-- <div style="max-height: 50vh;" class="overflow-auto w-full">
          <el-checkbox-group v-model="form.jmx" class="flex flex-col">
            <el-checkbox v-for="item in jmxList" :key="item.value" :label="item.value" :value="item.value" />
          </el-checkbox-group>
        </div> -->
      </el-form-item>
      <!-- <el-form-item label="targettime">
        <el-input v-model="formData.targettime" />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="submit"> 添加 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
